<template>
  <div id="app">
    <div class="title">
      <img src="/static/img/prefan.png" alt class="prefan" @click="back" />
      <img src="/static/img/shopmall.png" alt class="shopmall" />
      <img src="/static/img/more.png" alt class="more" />
    </div>
    <div class="swiper">
      <mt-swipe :auto="10000" :showIndicators="true">
        <mt-swipe-item>
          <img :src="'/'+seller.url" />
        </mt-swipe-item>
        <mt-swipe-item>
          <img :src="'/'+seller.url" />
        </mt-swipe-item>
        <mt-swipe-item>
          <img :src="'/'+seller.url" />
        </mt-swipe-item>
        <mt-swipe-item>
          <img :src="'/'+seller.url" />
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="message">
      <div class="top">
        <div class="lef">
          <span class="name">{{seller.name}}</span>
          <span class="num">{{seller.RL}}罐装 {{seller.month}}</span>
        </div>
        <div class="rig">
          <img src="/static/img/icon_save.png" />
          <span>收藏</span>
        </div>
      </div>
      <div class="mid">
        <div class="lef">
          <span class="pre">{{seller.prePrice}}</span>
          <span class="now">{{seller.nowPrice}}</span>
        </div>
        <div class="rig">
          <div class="dazhe">
            <span>{{seller.discount}}</span>
            <span>{{seller.shipped}}</span>
          </div>
          <div class="xinxi">
            <span>正品货源</span>
            <span>一件代发</span>
            <span>全球直邮</span>
            <span>售后无忧</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Top',
  props: ['seller'],
  data () {
    return {}
  },
  methods: {
    back () {
      this.$router.back()
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  width: 100%;
  height: 0.933333rem;
  position: relative;
  background: #ffffff;
  .prefan {
    position: absolute;
    left: 0.306667rem;
    top: 0.266667rem;
  }
  .shopmall {
    position: absolute;
    right: 1.6rem;
    top: 0.266667rem;
  }
  .more {
    position: absolute;
    right: 0.306667rem;
    top: 0.266667rem;
  }
}
.swiper {
  width: 100%;
  height: 7.2rem;
  background: #ffffff;
  img {
    width: 4.2rem;
    height: 6.37rem;
    display: block;
    margin: 0 auto;
  }
}
.message {
  height: 2.466667rem;
  background: #ffffff;
  overflow: hidden;
  .top {
    width: 100%;
    height: 1.2rem;
    overflow: hidden;
    .lef {
      width: 8.64rem;
      height: 100%;
      line-height: 0.6rem;
      font-weight: 500;
      float: left;
      span {
        display: block;
        margin-left: 0.4rem;
        font-size: 0.36rem;
        color: #666666;
      }
    }
    .rig {
      width: 1.146667rem;
      height: 0.906667rem;
      margin: 0.133333rem 0;
      border-left: 1px solid #666666;
      float: left;
      img {
        margin: 0 auto;
        display: block;
      }
      span {
        display: block;
        text-align: center;
        color: #f49d9a;
      }
    }
  }
  .mid {
    height: 1.226667rem;
    width: 100%;
    margin-top: 0.1rem;
    span {
      display: block;
    }
    .lef {
      width: 2.733333rem;
      height: 100%;
      float: left;
      .pre {
        font-size: 0.4532rem;
        color: #eb2222;
        margin-left: 0.373333rem;
      }
      .now {
        text-decoration: line-through;
        font-size: 0.32rem;
        color: #999999;
        margin-left: 0.293333rem;
      }
    }
    .rig {
      float: left;
      margin-left: 0.1rem;
      span {
        display: inline-block;
        margin-right: 0.1rem;
      }
      .dazhe {
        span {
          width: 0.95rem;
          height: 0.4rem;
          line-height: 0.4rem;
          text-align: center;
          background: #ff9900;
          color: #ffffff;
          font-size: 0.266667rem;
        }
      }
      .xinxi {
        margin-top: 0.133333rem;
        span {
          width: 1.413333rem;
          height: 0.4rem;
          line-height: 0.4rem;
          text-align: center;
          font-size: 0.266667rem;
          border: 1px solid #ff9900;
          color: #ff9900;
        }
      }
    }
  }
}
</style>
